<template>
  <div id="public">
    <div class="navbanner lunbo" >
			  <img src="../../static/images/newscenter.png" class=""/>
        <div class="tour-nab">           
            <ul class="nav nav-pills recruit-ul">
                 <li >
                    <router-link to="/lesson">
                        <a href="javascript:void(0);">文化课</a>
                    </router-link>
                 </li>
                <li>
                    <router-link to="/lesson/talent">
                        <a href="javascript:void(0);">才艺课</a>
                    </router-link>
                </li>
                <li class="active-underline">
                    <router-link to="/lesson/public">
                        <a href="javascript:void(0);">公开课</a>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
      <h1 class="t_nav">
        <p class="n1">课程体系</p>
         <div class="rt">当前位置：
           <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/lesson' }">课程体系</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/lesson/public' }">公开课</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
      </h1>
      <div class="navbanner clearfix" style="margin-top: 0;">
      <div class="sortBox">
        <div class="time">
          <div class="block">
            <div class="radio" style="margin-bottom:20px;"></div>
            <el-timeline :reverse="reverse">
              <el-timeline-item v-for="(activity, index) in activities" hide-timestamp :key="index">
                <span
                  @click="getBlogTagList(activity.uid)"
                  :class="[activity.uid == selectBlogUid ? 'sortBoxSpan sortBoxSpanSelect' : 'sortBoxSpan']"
                >{{activity.tagName}}</span>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
            
        <!-- <div class="article"> -->
          <div class="plate" v-for="(temp,index) in storyList"  @click="toDetail(temp)">
                <div class="open">公开课</div>
                <div class="tu">
                    <img v-if="temp.imgSrc" :src="preUrl+temp.imgSrc" alt=""></div>
                <div class="zi">
                    <h3>{{temp.title}}</h3>
                    <div class="vde-courseNumber">
                      <i class="el-icon-coordinate">
                      </i>
                      <span>课程人数：</span>2497人</div>
                    <div class="vde-starttime">
                      <i class="el-icon-sunrise">
                      </i>
                      <span>适用级别：</span>...</div>
                    <div >
                      <i class="el-icon-time">
                      </i>
                      <span>直播时间：</span>2020-06-06 20:00</div>
                    <!-- <div class="wanna">
                      <i class="el-icon-view">
                      </i>648人
                      <a href="public_details1.html" target="_Blank">想看</a>
                    </div> -->
                    <div>
                      <i class="el-icon-view">
                      </i>648人
                    </div>
                </div>
            </div>
      </div>
    </div>
   
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  data () {
    return {
      selectBlogUid: '',
      reverse: false,
      activities: [],
      itemByDate: [],
      articleByDate: {},
      count: 0,
      currentPage: 1,
      pageSize: 10,
       storyList: [],
      url: {
        storyList: "/sunNews/list",
      },
      preUrl: "http://localhost:8080/jeecg-boot/sys/common/static/",
    }
  },
  components: {
    // 注册组件
  },
  mounted () { },
  created () {
    this.getStoryList();
    var that = this

    this.$http.get('./static/json/getTagList.json').then((response) => {
      if (response.data.code == this.$ECode.SUCCESS) {
        var activities = response.data.data
        var result = []
        for (var a = 0; a < activities.length; a++) {
          var dataForDate = {
            tagName: activities[a].content,
            uid: activities[a].uid
          }
          result.push(dataForDate)
        }
        this.activities = result

        // 默认选择第一个
        this.getBlogTagList(activities[0].uid)
      }
    })

  },
  methods: {
     //跳转课程详情页面
    toDetail(data){
      this.$router.push("/subjectInfo?id="+data.id)
    },
     //获取公开课课程信息
    getStoryList() {
      request
        .get(this.url.storyList, {
          params: {
            pageSize:3,
            category:8,
          },
        })
        .then((res) => {
          if (res.data.success) {
            this.storyList = res.data.result.records;
            console.log(this.storyList);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 课程体系tag
    getBlogTagList (tagUid) {
      this.selectBlogUid = tagUid
      var params = new URLSearchParams()
      params.append('tagUid', tagUid)

	  this.$http.get('./static/json/getArticleByTagUid.json').then((response) => {
        if (response.data.code == this.$ECode.SUCCESS) {
          this.itemByDate = response.data.data.records
          this.currentPage = response.data.data.current
          this.pageSize = response.data.data.size
        }
      })

    },
    load () {
      var params = new URLSearchParams()
      if (
        this.selectBlogUid == null ||
          this.selectBlogUid == '' ||
          this.selectBlogUid == undefined
      ) {
        return
      }
      params.append('tagUid', this.selectBlogUid)
      params.append('currentPage', this.currentPage + 1)

	  this.$http.get('./static/json/getArticleByTagUid.json').then((response) => {
	    if (response.data.code == this.$ECode.SUCCESS) {
	      this.itemByDate = response.data.data.records
	      this.currentPage = response.data.data.current
	      this.pageSize = response.data.data.size
	    }
	  })

    },
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
#public .navbanner .content{
  height: 800px;
  display: flex;
  justify-content: space-between;
}

</style>
